<template>
  <div>
    <CityHeader></CityHeader>
    <CitySearch :cities="cities"></CitySearch>
    <CityList :cities="cities" :hotCities="hotCities" :letter="letter"></CityList>
    <Alphabet :cities="cities" @change="handleLetterChange"></Alphabet>
  </div>
</template>

<script>
import CityHeader from "./Components/Header.vue";
import CitySearch from "./Components/Search";
import CityList from "./Components/List";
import Alphabet from "./Components/Alphabet";
import axios from "axios";
export default {
  name: "City",
  components: {
    CityHeader,
    CitySearch,
    CityList,
    Alphabet
  },
  data() {
    return {
      hotCities: [],
      cities: {},
      letter: ""
    };
  },
  methods: {
    getCityInfo(res) {
      res = res.data;
      const cityInfo = res.data;
      this.hotCities = cityInfo.hotCities;
      this.cities = cityInfo.cities;
    },
    handleLetterChange(letter) {
      this.letter = letter;
    }
  },
  mounted() {
    axios.get("/api/city.json").then(this.getCityInfo);
  }
};
</script>

<style lang="stylus"scoped>
</style>
